import React, { useEffect, useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import * as service from '../../../api/Statistics'
import './Style/DataAge.scss'
import { DatePicker, Space, Table, Button, Select, Card } from 'antd';
import { Pie } from '@ant-design/plots';
import ExportJsonExcel from "js-export-excel"

interface Props {

}

const { RangePicker } = DatePicker;
function StatAge(props: Props) {
    const [agesllist, setAgeslist] = useState([])
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])

    useEffect(() => {
        setLoading(true);
        service.ages_list().then((res) => {
            console.log(res);
            setAgeslist(res.data.data)
            setLoading(false);
        })

        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.mechanismName, label: item.mechanismName }
            })
            setListerone(arr)
        })

        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.teamName, label: item.teamName }
            })
            setListertwo(arr)
        })
        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.doctorName, label: item.doctorName }
            })
            setListerthree(arr)
        })
    }, [])

    //点击搜索
    const handle = () => {
        // console.log(value);
        service.ageDataSearch({  }).then((res) => {
            console.log(res)
            setAgeslist(res.data.data)
        })
    };
    const columns = [
        {
            title: '序号',
            // dataIndex: 'key',
            key: 'key',
            render: (_: any, record: never) => <a>{agesllist.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '年龄段',
            dataIndex: 'years',
            key: 'years',
        },
        {
            title: '人次',
            dataIndex: 'population',
            key: 'population',
        },
        {
            title: '比例',
            // dataIndex: 'pic',
            key: 'prc',
            render: (_: any, record: any) => Number(record.prc * 100).toFixed(2)+'%'
        }
    ]

;
const config = {
    appendPadding: 10,
    data: agesllist,
    angleField: 'population',
    colorField: 'years',
    radius: 1,
    innerRadius: 0.6,
    label: {
        type: 'inner',
        offset: '-50%',
        content: '{value}',
        style: {
            textAlign: 'center',
            fontSize: 14,
        },
    },
    interactions: [
        {
            type: 'element-selected',
        },
        {
            type: 'element-active',
        },
    ],
    statistic: {
        //   title: false,
        content: {
            style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
            },
        
        },
    },
};
 // 导出    

 let excel = () => {//导出Excel表
    let sheetFilter = ["years", "population", ]//需要导出的属性，一般列表数据的属性
    let option = { fileName: "", datas: [{}] };
    option.fileName = "居民年龄";
    option.datas = [
        {
            sheetData: agesllist,//需要导出的数据
            sheetName: "居民年龄",
            sheetFilter: sheetFilter,
            sheetHeader: ["年龄段", "人次",],//每一列的列头
            columnWidth: [20, 20, 20, 20],//每一列的宽
        }
    ]
    let toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
}

return (
    <div className='data-age' style={{ padding: 20 }}>
        <div className='title'>居民年龄统计</div>
        <div className='top'>
            <div className='padding'>
                <span>机构</span>&nbsp;&nbsp;
                <Select
                    defaultValue="全部"
                    style={{ width: 160 }}
                    // onChange={handleChange}
                    options={
                        listerone
                    }
                />
            </div>
            <div className='padding'>
                <span>医生团队</span>&nbsp;&nbsp;
                <Select
                    defaultValue="请选择"
                    style={{ width: 160 }}
                    // onChange={handleChange}
                    options={
                        listertwo
                    }
                />
            </div>
            <div className='padding'>
                <span>医生</span>&nbsp;&nbsp;
                <Select
                    defaultValue="请选择"
                    style={{ width: 160 }}
                    // onChange={handleChange}
                    options={
                        listerthree
                    }
                />
            </div>
            <Button type="primary" icon={<SearchOutlined />} onClick={() => { handle()}}>
                    搜索
                </Button>

        </div>
        <div style={{ padding: "0 100px" }}>
            <Card title="居民年龄构成" bordered={false} >
                <Pie {...config} />
            </Card>
        </div>
        <Button onClick={() => { excel() }} style={{ float: 'right', margin: '10px 0' }}>导出</Button>
        <Table columns={columns} dataSource={agesllist} loading={loading}
        />

    </div>
);
}

export default StatAge;